<template>
  <el-form
    :model="data"
    :rules="dataYZ"
    ref="data"
    class="mar_top"
    label-width="170px"
  >
    <el-form-item label="店铺名称" prop="shop_title">
      <el-col :span="12">
        <el-input v-model="data.shop_title" clearable></el-input>
      </el-col>
    </el-form-item>

    <el-form-item label="店铺logo" prop="shop_logo">
      <el-col :span="12">
        <el-input
          v-model="data.shop_logo"
          placeholder="请上传logo图"
          clearable
          disabled
        ></el-input>
        <uploadpic
          :piclink="data.shop_logo"
          :width="150"
          :height="150"
          :real_width="50"
          :real_height="50"
          :is_more="false"
          @send_pic="onSuccess"
        >
        </uploadpic>
      </el-col>
    </el-form-item>

    <el-form-item label="商家介绍" prop="shop_tel">
      <el-col :span="12">
        <el-input v-model="data.shop_recommend" clearable></el-input>
      </el-col>
    </el-form-item>

    <el-form-item label="商家电话" prop="shop_tel">
      <el-col :span="12">
        <el-input v-model="data.shop_tel" clearable></el-input>
      </el-col>
    </el-form-item>

    <el-form-item label="经营分类" prop="shop_cate">
      <el-col :span="12">
        <el-select v-model="shop_cate" placeholder="请选择" multiple>
          <el-option
            :label="item.title"
            :value="item.id"
            v-for="item in cateOptions"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-col>
    </el-form-item>

    <el-form-item label="允许经营类别" prop="shop_cate">
      <el-col :span="12">
        <el-select
          v-model="checkList"
          placeholder="未选择表示允许经营所有系统分类"
          multiple
        >
          <el-option
            :label="check.title"
            :value="check.id"
            v-for="check in allow_option"
            :key="check.id"
          ></el-option>
        </el-select>
      </el-col>
    </el-form-item>

    <el-form-item label="所在省市区">
      <el-col :span="12">
        <city-cascader
          :level="3"
          size="large"
          :placeholder="selectedOptions.join('-')"
          @change="handleChange"
        />
      </el-col>
    </el-form-item>

    <el-form-item label="详细地址" prop="shop_address">
      <el-col :span="12">
        <el-input v-model="data.shop_address" clearable></el-input>
      </el-col>
      <el-col :span="5" :offset="1">
        <a>
          <el-button
            :loading="$store.state.isLoading"
            size="mini"
            type="primary"
            @click="
              $fnc.copyVal(
                `${data.shop_province || ''}${data.shop_city || ''}${
                  data.shop_area || ''
                }${data.shop_town || ''}${data.shop_address || ''}`
              )
            "
            >复制</el-button
          >
        </a>
      </el-col>
    </el-form-item>

    <el-form-item label="经纬度" prop>
      <el-col :span="12">
        <el-input placeholder v-model="JWD" clearable></el-input>
      </el-col>
      <el-col :span="5" :offset="1">
        <a
          target="_blank"
          :href="'https://lbs.qq.com/tool/getpoint/index.html'"
        >
          <el-button :loading="$store.state.isLoading" size="mini"
            >查看经纬度</el-button
          >
        </a>
      </el-col>
    </el-form-item>

    <template v-if="$route.path.indexOf('chain') >= 0">
      <el-form-item
        label="连锁门店商品排列类型"
        v-if="
          $store.state.plugin &&
          $store.state.plugin.lswm &&
          $store.state.plugin.lswm.is_open == 1
        "
      >
        <el-col :span="20" class="tl"
          ><el-radio-group v-model="data.shop_chain_style">
            <el-radio label="0">一行2列</el-radio>
            <el-radio label="1">一行一列</el-radio>
          </el-radio-group>
        </el-col>
      </el-form-item>
      <el-form-item
        label="连锁门店的营业状态"
        v-if="
          $store.state.plugin &&
          $store.state.plugin.lswm &&
          $store.state.plugin.lswm.is_open == 1
        "
      >
        <el-col :span="24" class="tl"
          ><el-radio-group v-model="data.shop_chain_status">
            <el-radio label="0">未营业</el-radio>
            <el-radio label="1">营业[可自提和外送]</el-radio>
            <el-radio label="2">营业[仅自提]</el-radio>
            <el-radio label="3">营业[仅外送]</el-radio>
          </el-radio-group>
        </el-col>
      </el-form-item>
    </template>
    <template v-else>
      <el-form-item label="平台服务费">
        <el-col :span="12">
          <el-input v-model="data.shop_fee" v-Int clearable>
            <span slot="suffix">‰</span>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="供应商推荐人奖">
        <el-col :span="12">
          <el-input v-model="data.shop_referrer" v-Int clearable>
            <span slot="suffix">‰</span>
          </el-input>
        </el-col>
      </el-form-item>

      <el-form-item :label="`线下支付送${integral}比例`" prop="shop_address">
        <el-col :span="12">
          <el-input v-model="data.xxzfintegral" clearable>
            <span slot="suffix">‰</span>
          </el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="收款码支付分佣比例" prop="shop_address">
        <el-col :span="12">
          <el-input v-model="data.xxzffxyjb" clearable>
            <span slot="suffix">‰</span>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="允许积分抵用" prop="shop_address">
        <el-col :span="12">
          <el-input v-model="data.show_credits" clearable>
            <span slot="suffix">‰</span>
          </el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="是否允许使用红包优惠券">
        <el-col :span="12" class="tl">
          <el-switch
            class="zdySwith"
            :width="82"
            v-model="data.is_show_coupons"
            active-color="#1aad19"
            inactive-color="#ffffff"
            active-text="是"
            inactive-text="否"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-col>
      </el-form-item>
    </template>

    <el-form-item label="是否开启骑手配送" v-if="ifOpenqsps">
      <el-col :span="12" class="tl">
        <el-switch
          class="zdySwith"
          :width="82"
          v-model="data.shop_is_rider"
          active-color="#1aad19"
          inactive-color="#ffffff"
          active-text="开启"
          inactive-text="关闭"
          active-value="1"
          inactive-value="0"
        ></el-switch>
      </el-col>
    </el-form-item>

    <el-form-item label="审核状态" v-if="!isCheckSupplier">
      <el-col :span="12">
        <el-radio-group v-model="data.is_check">
          <el-radio label="0">未审核</el-radio>
          <el-radio label="1">已审核</el-radio>
          <el-radio label="2">驳回</el-radio>
        </el-radio-group>
      </el-col>
    </el-form-item>

    <el-form-item label="备注/不通过原因" prop="shop_address">
      <el-col :span="12">
        <el-input v-model="data.shop_remark" clearable></el-input>
      </el-col>
    </el-form-item>

    <div class="mar_bottom_15">
      <span class="sizeColor size_13 sp_style"></span>
      <el-button
        :loading="$store.state.isLoading"
        size="medium"
        type="primary"
        @click="subDate('data')"
        >确定</el-button
      >
    </div>
  </el-form>
</template>

<script>
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
import cityCascader from "@/components/currency/cityCascader/cityCascader";
import uploadpic from "@/components/page/pic/up_pic";
import { mapState } from "vuex";
export default {
  components: {
    compressimgUpload,
    cityCascader,
    uploadpic,
  },
  props: {
    is_apply: {},
    row: {
      type: Object,
      default: {},
    },
    isCheckSupplier: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    ...mapState({
      puhlig: (state) => state.plugin,
    }),
    ifOpenqsps() {
      if (
        typeof this.puhlig.qsps != undefined &&
        this.puhlig.qsps &&
        this.puhlig.qsps.is_open == "1"
      ) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {
    this.data = {};
    this.data = this.row;
    if (this.data.shop_allow_cate != undefined && this.data.shop_allow_cate) {
      this.checkList = this.data.shop_allow_cate.split("@");
    } else {
      this.checkList = [];
    }
    if (this.row.shop_latitude && this.row.shop_longitude) {
      this.JWD = this.row.shop_latitude + "," + this.row.shop_longitude;
    }

    this.selectedOptions = [
      this.row.shop_province,
      this.row.shop_city,
      this.row.shop_area,
      this.row.shop_town,
    ];
    if (this.row.shop_cate) {
      this.shop_cate = this.row.shop_cate.split("@");
    }

    this.$api.getShops.getProductCateTreeList({}).then((res) => {
      if (res.data.code == 200) {
        this.cateOptions = res.data.result;
      }
    });
    this.$api.getShops
      .get_lists_son({
        parent_id: 0,
      })
      .then((res) => {
        if (res.data.code == 200) {
          this.allow_option = res.data.result;
        }
      });
    this.reward_option = this.$store.state.rewardOption;
    this.reward_option.forEach((item, k) => {
      if (item.value == "amount") {
        this.amount = item.label;
      }
      if (item.value == "integral") {
        this.integral = item.label;
      }
    });
  },
  data() {
    return {
      integral: "",
      amount: "",
      checkList: [],
      allow_option: [],
      JWD: "",
      cateOptions: [],
      shop_cate: [],
      options: this.$addressJson,
      selectedOptions: [], //["福建省", "福州市", "台江区"]
      optionProps: {
        value: "y",
        label: "t",
        children: "z",
      },
      data: {
        shop_title: "", //店铺名称
        shop_logo: "", //店铺logo
        shop_tel: "", //店铺电话
        shop_province: "", //省
        shop_city: "", //市
        shop_area: "", //区
        shop_town: "", //区
        shop_address: "", //地址
        shop_cate: "", //经营分类
        shop_longitude: "", //经度
        shop_latitude: "", //纬度
        shop_fee: "", //平台服务费千分币,
        shop_referrer: "",
        xxzfintegral: 0,
        xxzffxyjb: 0,
        shop_is_rider: "0",
        is_show_coupons: "1", //是否允许使用红包优惠券
        show_credits: "", //允许积分抵用千分比
      },
      dataYZ: {
        shop_title: [
          {
            required: true,
            message: "请输入店铺名称",
            trigger: "blur",
          },
          // {
          //   min: 2,
          //   max: 10,
          //   message: "长度在 2 到 10 个字符",
          //   trigger: "blur"
          // }
        ],
      },
      fileList: [],
    };
  },
  methods: {
    onSuccess(pic) {
      this.$set(this.data, "shop_logo", pic);
    },
    handleChange(value) {
      if (value) {
        for (var i = 0; i < value.length; i++) {
          if (i == 0) this.data.shop_province = value[i];
          if (i == 1) this.data.shop_city = value[i];
          if (i == 2) this.data.shop_area = value[i];
          if (i == 3) this.data.shop_town = value[i];
        }
      }
    },

    subDate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.data.shop_province == "") {
            this.$fnc.alertError("请选择区域地址");
            return false;
          }

          var JWD = this.JWD;
          var jwd_ar = JWD.split(",");
          this.data.shop_longitude = jwd_ar[1]; //经度
          this.data.shop_latitude = jwd_ar[0]; //纬度
          var params = {};
          params = this.data;
          params.shop_cate = this.shop_cate.join("@");
          params.shop_allow_cate = "";
          params.shop_allow_cate = this.checkList.join("@");
          if (this.isCheckSupplier) {
            params.id = params.uid;
            this.$api.getUser.saveeditSupplier(params).then((res) => {
              if (res.data.code == 200) {
                this.$fnc.alertSuccess({
                  text: res.data.code_desc,
                });
                this.$emit("openThis");
              } else {
                this.$fnc.alertError(res.data.code_desc, res.data.result);
              }
            });
          } else {
            this.$api.getSupplier.getCheckSupplier(params).then((res) => {
              if (res.data.code == 200) {
                this.$fnc.alertSuccess({
                  text: res.data.code_desc,
                });
                this.$emit("openThis");
              } else {
                this.$fnc.alertError(res.data.code_desc, res.data.result);
              }
            });
          }
        }
      });
    },
  },
};
</script>
